<template>
  <div id="contsainer"></div>
</template>
<script>
export default {
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initCesium()
    this.addBoxGeometry(this.viewer)
  },
  methods: {
    initCesium() {
      this.viewer = new Cesium.Viewer('contsainer', {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: false,
        selectionIndicator: false, //是否显示选取指示器组件
        shouldAnimate: false, //自动播放动画控件
        shadows: true, //是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D
      })
      this.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
    },
    addBoxGeometry(viewer) {
      //方式一 怎么创建的
      let box1 = new Cesium.BoxGeometry({
        vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
        maximum: new Cesium.Cartesian3(250000.0, 250000.0, 250000.0), // 长宽高
        minimum: new Cesium.Cartesian3(-250000.0, -250000.0, -250000.0)
      })
      let boxGeometry1 = Cesium.BoxGeometry.createGeometry(box1)

      let boxInstance1 = new Cesium.GeometryInstance({
        geometry: boxGeometry1,
        modelMatrix: Cesium.Matrix4.multiplyByTranslation(
          // formDegrees 定位
          Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-88.59777, 40.03883)),
          new Cesium.Cartesian3(0.0, 0.0, 0.0),
          new Cesium.Matrix4()
        ),
        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
        },
        id: 'bottom'
      })

      //方式二 采用点的形式创建

      let points = Cesium.AxisAlignedBoundingBox.fromPoints(
        Cesium.Cartesian3.fromDegreesArray([-72.0, 40.0, -70.0, 35.0, -75.0, 30.0, -70.0, 30.0, -68.1, 50])
      )
      let boxGeometry2 = Cesium.BoxGeometry.fromAxisAlignedBoundingBox(points)

      let boxInstance2 = new Cesium.GeometryInstance({
        geometry: boxGeometry2,
        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.GREEN)
        },
        id: 'center'
      })

      //方式三
      let box3 = Cesium.BoxGeometry.fromDimensions({
        vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
        dimensions: new Cesium.Cartesian3(500000.0, 500000.0, 500000.0)
      })
      let boxGeometry3 = Cesium.BoxGeometry.createGeometry(box3)

      let boxInstance3 = new Cesium.GeometryInstance({
        geometry: boxGeometry3,
        modelMatrix: Cesium.Matrix4.multiplyByTranslation(
          Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)),
          new Cesium.Cartesian3(0.0, 0.0, 3000.0),
          new Cesium.Matrix4()
        ),
        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE)
        },
        id: 'top'
      })

      let primitive = new Cesium.Primitive({
        geometryInstances: [boxInstance1, boxInstance2, boxInstance3],
        asynchronous: false, //是否采用多线程
        appearance: new Cesium.PerInstanceColorAppearance({
          translucent: false,
          closed: true
        })
      })

      viewer.scene.primitives.add(primitive)
    }
  }
}
</script>
<style scoped>
#contsainer {
  height: 100%;
  width: 100%;
  background-color: red;
}
</style>
